<!-- 积分流水列表
 * @Descripttion: 
 * @Author: fubinbin binbin@ssc-hn.com
 * @Date: 2025-03-12
 * @LastEditors: fubinbin binbin@ssc-hn.com
 * @LastEditTime: 2025-03-12
-->
<template>
  <div class="ssc-list org-position-list">
    <div class="ssc-search">
      <a-form autocomplete="off" :model="searchParam">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="积分">
              <a-select v-model:value="searchParam.coinId" showSearch placeholder="请选择积分">
                <a-select-option v-for="item in integralTypeList" :key="item.id" :value="item.id">{{ item.coinName }}({{ item.coinSymbol }})</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="类型">
              <a-select v-model:value="searchParam.transactionType" showSearch placeholder="请选择类型">
                <a-select-option v-for="item in typeList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="状态">
              <a-select v-model:value="searchParam.transactionStatus" showSearch placeholder="请选择状态">
                <a-select-option v-for="item in stateList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-row justify="end">
              <a-button @click="clear()">重置</a-button>
              <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
            </a-row>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="日期">
              <a-range-picker style="width: 100%" v-model:value="searchParam.createTime" show-time format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item label="搜索">
              <a-select style="width: 250px; margin-right: 20px" v-model:value="searchParam.transactionToType" showSearch placeholder="请选择搜索">
                <a-select-option v-for="item in searchList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
              <a-input style="width: 250px" v-model:value="searchParam.address" placeholder="请输入" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">积分流水</span>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'transactionType'">
            <span>
              {{
                typeList
                  .filter((v) => v.value === record.transactionType)
                  .map((item) => item.label)
                  .join('')
              }}
            </span>
          </template>
          <template v-if="column.dataIndex === 'transactionStatus'">
            <span>
              {{
                stateList
                  .filter((v) => v.value == record.transactionStatus)
                  .map((item) => item.label)
                  .join('')
              }}
            </span>
          </template>

          <template v-if="column.dataIndex === 'fromAddress'">
            <div class="flex items-center">
              {{ record.transactionType === 5 ? record.companyName : '' }}
            </div>
            <div>{{ record.transactionType === 1 ? '系统发行' : record.transactionType === 2 ? '系统增发' : record.fromAddress ? record.fromAddress : '' }}</div>
          </template>
          <template v-if="column.dataIndex === 'createTime'">
            {{ formatToDateTime(record.createTime) }}
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, ref, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'

  import { requestGetCoinInfoSelectList, requestGetTransactionInfoPage } from '/@/api/integral/integralFlow'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'
  import { formatToDateTime } from '/@/utils/date'

  const route = useRoute()
  const routePath = route.path
  /** 搜索条件 */
  const searchParam = reactive({
    coinId: null,
    transactionType: null,
    createTime: [],
    transactionToType: null,
    transactionStatus: null,
    address: '',
  })

  const integralTypeList = ref<any[]>([])

  const typeList = ref([
    {
      value: 1,
      label: '发行',
    },
    {
      value: 2,
      label: '增发',
    },
    {
      value: 3,
      label: '销毁',
    },
    {
      value: 4,
      label: '转账',
    },
    {
      value: 5,
      label: '充值',
    },
  ])

  const stateList = ref([
    {
      value: 1,
      label: '成功',
    },
    {
      value: 2,
      label: '处理中',
    },
    {
      value: 3,
      label: '失败',
    },
  ])

  const searchList = ref([
    {
      value: 1,
      label: '发送方',
    },
    {
      value: 2,
      label: '接收方',
    },
  ])

  /** 搜索条件 */
  const formatParam = reactive({
    coinId: '',
    transactionType: NaN,
    transactionToType: NaN,
    transactionStatus: NaN,
    address: '',
    queryTab: 1,
    startTime: '',
    endTime: '',
  })

  const setFormat = (value) => {
    formatParam.startTime = value.createTime?.length ? value.createTime[0] : null
    formatParam.endTime = value.createTime?.length ? value.createTime[1] : null
    formatParam.coinId = value.coinId
    formatParam.transactionType = value.transactionType
    formatParam.transactionToType = value.transactionToType
    formatParam.address = value.address
    formatParam.transactionStatus = value.transactionStatus
  }

  watch(
    () => searchParam,
    (value) => {
      if (value) setFormat(value)
    },
    { immediate: true, deep: true },
  )

  /** 表格列配置 */
  const columns = [
    { title: '编号', dataIndex: 'id' },
    { title: '积分', dataIndex: 'coinName' },
    { title: '流水类型', dataIndex: 'transactionType' },
    { title: '时间', dataIndex: 'createTime' },
    { title: '数量', dataIndex: 'transferAmount' },
    { title: '发送方', dataIndex: 'fromAddress' },
    { title: '接收方', dataIndex: 'toAddress' },
    { title: '状态', dataIndex: 'transactionStatus' },
  ]

  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<GetTransactionInfoPageTypes.IRequest, GetTransactionInfoPageTypes.IResponse[]>(formatParam, requestGetTransactionInfoPage)

  onMounted(() => {
    // 积分发行商 - 积分流水
    if (routePath === '/issuer-integral-flow/list') {
      formatParam.queryTab = 2
      // 系统管理 - 积分流水
    } else if (routePath === '/integral-flow/list') {
      formatParam.queryTab = 1
      // 监管机构 - 积分流水
    } else if (routePath === '/regulator-integral-flow/list') {
      formatParam.queryTab = 3
    }
    handleGetCoinInfoSelectList()
    queryList()
  })

  /**
   * 重置
   */
  const clear = () => {
    searchParam.coinId = null
    searchParam.transactionType = null
    searchParam.createTime = []
    searchParam.transactionToType = null
    searchParam.transactionStatus = null
    searchParam.address = ''
    setFormat(searchParam)
    search()
  }

  const handleGetCoinInfoSelectList = async () => {
    const res = await requestGetCoinInfoSelectList({
      queryTab: formatParam.queryTab,
    })
    integralTypeList.value = res.responseData
  }

  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })
</script>

<style lang="less" scoped></style>
